<template>
    <h1>父子组件互相调用refs</h1>
    <h3 class="msg">
        {{ vData.msg }}
    </h3>
    <div>{{ props.pmsg }}</div>
    <button @click="goParent">执行父组件方法</button>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
const $inst = getCurrentInstance().proxy;
const ins = getCurrentInstance();
const props = defineProps(["pmsg"]);
const fontColor = ref("#ff33ff");
const vData = reactive({
    msg: "hello world组件",
});

function goParent() {
    console.log(ins);
    // $inst.$parent.vueData.msg = "哈哈哈，修改了";
    $inst.$parent.msg = "哈哈哈，修改了";
    console.log($inst.$parent.msg);
    $inst.$parent.alertMsg();
}

//父组件想通过ref访问子组件数据方法，首先要暴露出去，否则undefined
defineExpose({
    fontColor,
    vData,
    goParent,
});
</script>

<style lang="scss" scoped>
.msg {
    color: v-bind(fontColor);
}
</style>
